<template>
    <div class="HomeBox">
        <div class="topBox">
            <div class="headlines">
                在用绳综合状态情况
                <el-button type="primary" class="fr marl-10">
                    <router-link to="/dashboard" target="_blank" style="color: white">大屏展示</router-link>
                </el-button>

                <DataSelect table="Department" class="fr" placeholder="请选择矿山" :filter="{ _Type: Enums.Department_Type.矿山 }" v-model:id="filterModel._DepartmentID" @change="departmentChange"></DataSelect>
            </div>
            <div class="topNum">
                <div class="topNumBox">
                    <div class="topNumItem">{{ numObj.green }}</div>
                    <div class="topNumName">轻度</div>
                </div>
                <div class="topNumBox">
                    <div class="topNumItem">{{ numObj.blue }}</div>
                    <div class="topNumName">中度</div>
                </div>
                <div class="topNumBox">
                    <div class="topNumItem">{{ numObj.yellow }}</div>
                    <div class="topNumName">重度</div>
                </div>
                <div class="topNumBox">
                    <div class="topNumItem">{{ numObj.orange }}</div>
                    <div class="topNumName">严重</div>
                </div>
                <div class="topNumBox">
                    <div class="topNumItem">{{ numObj.grey }}</div>
                    <div class="topNumName">报废</div>
                </div>
            </div>
        </div>
        <div class="bottomBox">
            <div class="bottomItem">
                <div class="headlines">在用绳LA情况</div>
                <div class="chartBox" id="chart1"></div>
            </div>
            <div class="bottomItem">
                <div class="headlines">在用绳DIA情况</div>
                <div class="chartBox" id="chart2"></div>
            </div>
            <div class="bottomItem">
                <div class="headlines">在用绳LMA情况</div>
                <div class="chartBox" id="chart3"></div>
            </div>
            <div class="bottomItem">
                <div class="headlines">在用LL情况</div>
                <div class="chartBox" id="chart4"></div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import Enums from "@/gx/Enums";
import _ from "lodash";

let numObj = ref<any>({});
const HomeData = ref<any>({});

//页面加载
onMounted(() => {
    clearCharts();
    Init();
});

//初始化
const Init = () => {
    GetHomeData();
};

//搜索条件
const filterModel = ref<any>({});

//改变矿山
const departmentChange = () => {
    GetHomeData();
};

const GetHomeData = () => {
    App.CallApi(Api.UsingWirerope.GetHomeData(), {
        data: filterModel.value,
        success: (res: any) => {
            HomeData.value = res;
            numObj.value = res.zhongHe;
            initChart();
        },
    });
};

const initChart = () => {
    let chart1 = echarts.init(document.getElementById("chart1")),
        chart2 = echarts.init(document.getElementById("chart2")),
        chart3 = echarts.init(document.getElementById("chart3")),
        chart4 = echarts.init(document.getElementById("chart4"));
    let options = {
        color: ["#67C23A", "#409EFF", "#F4EA2A", "#FEA821", "#909399"],
        xAxis: {
            type: "category",
            data: ["轻度", "中度", "重度", "严重", "报废"],
        },
        yAxis: {
            type: "value",
        },
        series: [
            {
                data: [0, 0, 0, 0, 0],
                type: "bar",
                label: {
                    show: true,
                    position: "top",
                    color: "#25B3F2",
                },
            },
        ],
    };

    let options1 = _.cloneDeep(options),
        options2 = _.cloneDeep(options),
        options3 = _.cloneDeep(options),
        options4 = _.cloneDeep(options);

    options1.series[0].data = getChartData(HomeData.value.la);
    options2.series[0].data = getChartData(HomeData.value.dia);
    options3.series[0].data = getChartData(HomeData.value.lma);
    options4.series[0].data = getChartData(HomeData.value.nianJu);

    chart1.setOption(options1);
    chart2.setOption(options2);
    chart3.setOption(options3);
    chart4.setOption(options4);
};
const clearCharts = () => {
    let chart1 = echarts.init(document.getElementById("chart1")),
        chart2 = echarts.init(document.getElementById("chart2")),
        chart3 = echarts.init(document.getElementById("chart3")),
        chart4 = echarts.init(document.getElementById("chart4"));
    chart1.dispose();
    chart2.dispose();
    chart3.dispose();
    chart4.dispose();
};
const getChartData = (data: Object) => {
    let arr = [],
        colorObj = {
            green: "#67C23A",
            blue: "#409EFF",
            yellow: "#F4EA2A",
            orange: "#FEA821",
            grey: "#909399",
        };
    for (let i in data) {
        arr.push({ value: data[i], itemStyle: { color: colorObj[i] } });
    }
    return arr;
};
</script>

<style lang="scss" scoped>
.HomeBox {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    flex-direction: column;
    row-gap: 20px;

    .topNum {
        display: flex;
        column-gap: 40px;
        .topNumBox {
            flex: 1;
            .topNumItem {
                height: 160px;
                color: white;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 72px;
                border-radius: 5px;
            }
            .topNumName {
                text-align: center;
                font-size: 32px;
                padding: 6px 0 10px;
                color: #6e7079;
            }
        }

        .topNumBox:nth-child(1) .topNumItem {
            background-color: #67c23a;
        }
        .topNumBox:nth-child(2) .topNumItem {
            background-color: #409eff;
        }
        .topNumBox:nth-child(3) .topNumItem {
            background-color: #f4ea2a;
        }
        .topNumBox:nth-child(4) .topNumItem {
            background-color: #fea821;
        }
        .topNumBox:nth-child(5) .topNumItem {
            background-color: #909399;
        }
    }
    .bottomBox {
        display: flex;
        column-gap: 40px;
        flex: 1;
        .headlines {
            margin: 20px 0 0px;
        }
        .bottomItem {
            flex: 1;
            display: flex;
            flex-direction: column;
            .chartBox {
                flex: 1;
            }
        }
    }
}
</style>
